<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>iGallery Widget Documentation</title>
    <link rel="stylesheet" href="../css/style.css" type='text/css' media='all' />
    <link rel="stylesheet" href="../css/iphone.css" type='text/css' media='all' />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.iphone.js"></script>
    <script type="text/javascript" src="../js/other/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../js/ui/ui.iGallery.js"></script>
			
	<!-- Highlight code -->
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shCore.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushJScript.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushXml.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushPhp.js"></script>
	<link type="text/css" rel="stylesheet" href="http://scripts.hohli.com/brush/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="http://scripts.hohli.com/brush/styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'http://scripts.hohli.com/brush/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
	
    <script type="text/javascript">
    $(document).ready(function(){
        $('.gallery').iGallery();
    });
    </script>
	<style type="text/css">
		.gallery {
			width:320px;
			height:480px;
		}
	</style>
	<style type="text/css">
		body {
			background:#ccc;
		}
		.syntaxhighlighter {
			margin: 0 !important;
		}
	</style>
</head>

<body class="shadow">
    <div class="iphone">
    <div class="titlebar">
        iGallery Widget
    </div>
    <div class="list">
		<h2>Required</h2>
		<ul class="inlist">
			<li>jQuery UI Core</li>
			<li>Fixed size in CSS</li>
		</ul>
			
		<h2>Example</h2>
		<pre class="brush: xml;">
		    &lt;link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' /&gt;
		    &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript" src="js/jquery-ui.js"&gt;&lt;/script&gt;
			&lt;script type="text/javascript" src="js/ui/ui.iGallery.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript"&gt;
			$(document).ready(function(){
				// jquery.iphone.js have autoloader, but you can use
				// alternative method of init widget
		    	$('.gallery').iGallery();
		    });
		    &lt;/script&gt;
			&lt;div class="gallery" style="width:320px;height:480px;"&gt;					
			    &lt;img src="../app/upackinglist/images/home.jpg" alt="Home Screen"/&gt;
			    &lt;img src="../app/upackinglist/images/list.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/list_edit.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/list_new.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/pack_list.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/pack_list_cats.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/pack_list_edit.jpg" alt=""/&gt;
			    &lt;img src="../app/upackinglist/images/pack_list_edit2.jpg" alt=""/&gt;
                &lt;p&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
                lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
                in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
                euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
                eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
                at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
                nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
                tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
                fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
                lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.
                &lt;/p&gt;
				
			&lt;/div&gt;
		</pre>
		<h2>Demo</h2>
		<div class="gallery aligncenter">
		    <img src="../app/upackinglist/images/home.jpg" alt="Home Screen"/>
		    <img src="../app/upackinglist/images/list.jpg" alt=""/><br />

		    <img src="../app/upackinglist/images/list_edit.jpg" alt=""/>
		    <img src="../app/upackinglist/images/list_new.jpg" alt=""/>
		    <img src="../app/upackinglist/images/pack_list.jpg" alt=""/>
		    <img src="../app/upackinglist/images/pack_list_cats.jpg" alt=""/>
		    <img src="../app/upackinglist/images/pack_list_edit.jpg" alt=""/>
		    <img src="../app/upackinglist/images/pack_list_edit2.jpg" alt=""/>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
                lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
                in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
                euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
                eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
                at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
                nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
                tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
                fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
                lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.
                </p>
		</div>
	</div>
	</div>
</body>
</html>
